<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pym Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js"></script>
</head>
<body>
<div class="jumbotron">
    <div class="container">
        <center>
            <h1>Pym 分布式系统的弹性伸缩</h1>
        </center>
    </div>
</div>
<div class="container">
    <div class="row">
        <form class="form-inline">
            <div class="form-group">
                <label>期望QPS</label>
                <input type="text" class="form-control" id="request-qps" placeholder="Request QPS">
            </div>
            <button type="button" class="btn btn-primary" id="request-qps-btn">确定</button>
            <div class="form-group">
                <label>期望实例数</label>
                <input type="text" class="form-control" id="request-replica" placeholder="Request Replica">
            </div>
            <button type="button" class="btn btn-primary" id="request-replica-btn">确定</button>
        </form>
        <script type="text/javascript">
            function reportSetting(which, kind, val) {
                console.log(kind);
                console.log(val);
                url = '/setting/' + which;
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    data: {
                        key: kind,
                        val: val
                    },
                    success: function (res) {
                        console.log(res)
                    }
                });
            }

            $("#request-qps-btn").click(function () {
                var data = $("#request-qps").val()
                reportSetting("fancy", "qps", data)
                reportSetting("old", "qps", data)
            });
            $("#request-replica-btn").click(function () {
                var data2 = $("#request-replica").val()
                reportSetting("fancy", "replica", data2)
                reportSetting("old", "replica", data2)
            })
        </script>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h5>Pym-Operator: <span>50</span>%</h5>
                    <h5> Fixed-Bandwidth-scheme: <span>30</span>%</h5>
                    <div id="qps" style="width: 100%;height:300px;"></div>
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var qpsChart = echarts.init(document.getElementById('qps'));
                        var lastQPSTime = 1;
                        var dateQPS = [];
                        var requestQPSData = [];
                        var testQPSData = [];
                        var compareQPSData = [];
                        var maxQPSLen = 300;
                        var lastTestData;
                        var lastCompareData;
                        // 指定图表的配置项和数据
                        var optionQPS = {
                            title: {
                                text: '系统QPS图'
                            },
                            legend: {
                                data: ['实验组QPS', '对照组QPS', `指定QPS`]
                            },
                            xAxis: {
                                type: 'category',
                                data: dateQPS
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    id: 'test',
                                    name: '实验组QPS',
                                    type: 'line',
                                    smooth: true,
                                    connectNulls: true,
                                    data: testQPSData,
                                },
                                {
                                    id: 'compare',
                                    name: '对照组QPS',
                                    type: 'line',
                                    smooth: true,
                                    connectNulls: true,
                                    data: compareQPSData,
                                },
                                {
                                    id: 'request',
                                    name: '指定QPS',
                                    type: 'line',
                                    smooth: true,
                                    connectNulls: true,
                                    data: requestQPSData,
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            ]
                        };
                        qpsChart.setOption(optionQPS);

                        function updateData() {
                            $.ajax({
                                type: 'GET',
                                url: '/qps/old',
                                dataType: 'json',
                                success: function (res) {
                                    if (res.val < 5) {
                                        res.val = lastCompareData
                                    } else {
                                        lastCompareData = res.val
                                    }
                                    compareQPSData.push(res.val)
                                }
                            });
                            $.ajax({
                                type: 'GET',
                                url: '/qps/fancy',
                                dataType: 'json',
                                success: function (res) {
                                    if (res.val < 5) {
                                        res.val = lastTestData
                                    } else {
                                        lastTestData = res.val
                                    }
                                    testQPSData.push(res.val)
                                }
                            });
                            $.ajax({
                                type: 'GET',
                                url: '/requestqps/fancy',
                                dataType: 'json',
                                success: function (res) {
                                    val = res.val * 0.45;
                                    requestQPSData.push(val)
                                }
                            });
                            dateQPS.push(lastQPSTime);
                            lastQPSTime++;
                            if (dateQPS.length > maxQPSLen) {
                                dateQPS.shift();
                                testQPSData.shift();
                                compareQPSData.shift();
                                requestQPSData.shift();
                            }
                        }

                        setInterval(function () {
                            updateData();
                            qpsChart.setOption(optionQPS)
                        }, 5000)
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="resource-allocation" style="width: 100%;height:300px;"></div>
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var allocationChart = echarts.init(document.getElementById('resource-allocation'));
                        var lastAllocationTime = 1;
                        var dateAllocation = [];
                        var testAllocationData = [];
                        var compareAllocationData = [];
                        var maxAllocationLen = 300;
                        // 指定图表的配置项和数据
                        var optionAllocation = {
                            title: {
                                text: '资源分配图'
                            },
                            legend: {
                                data: ['实验组资源分配', '对照组资源分配']
                            },
                            xAxis: {
                                type: 'category',
                                data: dateAllocation
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    id: 'test',
                                    name: '实验组资源分配',
                                    type: 'line',
                                    smooth: true,
                                    data: testAllocationData,
                                },
                                {
                                    id: 'request',
                                    name: '对照组资源分配',
                                    type: 'line',
                                    smooth: true,
                                    data: compareAllocationData,
                                }
                            ]
                        };
                        allocationChart.setOption(optionAllocation);

                        function updateAllocationData() {
                            $.ajax({
                                type: 'GET',
                                url: '/allocation/old',
                                dataType: 'json',
                                success: function (res) {
                                    compareAllocationData.push(res.val)
                                }
                            });
                            $.ajax({
                                type: 'GET',
                                url: '/allocation/fancy',
                                dataType: 'json',
                                success: function (res) {
                                    testAllocationData.push(res.val)
                                }
                            });
                            dateAllocation.push(lastAllocationTime);
                            lastAllocationTime++;
                            if (dateAllocation.length > maxAllocationLen) {
                                dateAllocation.shift();
                                testAllocationData.shift();
                                compareAllocationData.shift();
                            }
                        }

                        setInterval(function () {
                            updateAllocationData();
                            allocationChart.setOption(optionAllocation)
                        }, 5000)
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="resource-time" style="width: 100%;height:300px;"></div>
                    <script type="text/javascript">
                        var completionChart = echarts.init(document.getElementById('resource-time'));
                        var last_fancy_data = [0, 0];
                        var last_old_data = [0, 0];
                        var fancy_data = [];
                        var old_data = [];
                        var maxXAxis = 300;
                        var maxYAxis = 10;
                        var axis = [
                            [0, 10],
                            [300, 0]
                        ];
                        var timeOption = {
                            title: {
                                text: '资源使用及任务完成情况'
                            },
                            xAxis: {},
                            yAxis: {},
                            legend: {
                                data: ['实验组资源时', '对照组资源时']
                            },
                            series: [
                                {
                                    name: '实验组资源时',
                                    symbolSize: 0,
                                    data: axis,
                                    type: 'scatter',
                                    markLine: {
                                        data: fancy_data,
                                        lineStyle: {
                                            normal: {
                                                type: 'solid',
                                            }
                                        }
                                    }
                                },
                                {
                                    symbolSize: 0,
                                    name: '对照组资源时',
                                    data: axis,
                                    type: 'scatter',
                                    markLine: {
                                        data: old_data,
                                        lineStyle: {
                                            normal: {
                                                type: 'solid',
                                            },
                                        }
                                    }
                                }
                            ]
                        };
                        completionChart.setOption(timeOption);

                        function updateCompletionData(which) {
                            url = '/timecompletion/';
                            url += which;
                            $.ajax({
                                type: 'GET',
                                url: url,
                                dataType: 'json',
                                success: function (res) {
                                    if (res.completion * 2 >= maxYAxis) {
                                        maxYAxis = maxYAxis * 2;
                                        axis.push([maxXAxis, maxYAxis]);
                                    }
                                    if (res.resource_time * 2 >= maxXAxis) {
                                        maxXAxis = maxXAxis * 2;
                                        axis.push([maxXAxis, maxYAxis]);
                                    }

                                    if (which === "old") {
                                        var temp1 = [
                                            {xAxis: last_old_data[0], yAxis: last_old_data[1], symbol: 'none'},
                                            {xAxis: res.resource_time, yAxis: res.completion, symbol: 'none'}
                                        ];
                                        last_old_data = [res.resource_time, res.completion];
                                        old_data.push(temp1);
                                    } else if (which === 'fancy') {
                                        var temp2 = [
                                            {xAxis: last_fancy_data[0], yAxis: last_fancy_data[1], symbol: 'none'},
                                            {xAxis: res.resource_time, yAxis: res.completion, symbol: 'none'}
                                        ];
                                        last_fancy_data = [res.resource_time, res.completion];
                                        fancy_data.push(temp2)
                                    }
                                    console.log(which, res)
                                }
                            });
                        }

                        setInterval(function () {
                            updateCompletionData('old');
                            updateCompletionData('fancy');
                            completionChart.setOption(timeOption);
                        }, 5000)
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="use-free" style="width: 80%;height:300px;"></div>
                <script type="text/javascript">
                    var useFreeChart = echarts.init(document.getElementById('use-free'));
                    // barSeries = [];
                    // for (var i = 0; i < 8; i++) {
                    //     var barItemUse = {
                    //         name: 'tidb-cluster-tikv-' + i + 'use',
                    //         type: 'bar',
                    //         barWith: 20,
                    //         stack: 'tidb-cluster-tikv-' + i,
                    //         data: [0, 0]
                    //     };
                    //     var barItemFree = {
                    //         name: 'tidb-cluster-tikv-' + i + 'free',
                    //         type: 'bar',
                    //         barWith: 20,
                    //         stack: 'tidb-cluster-tikv-' + i,
                    //         itemStyle: {
                    //             normal: {
                    //                 color: '#ddd'
                    //             }
                    //         },
                    //         data: [0, 0]
                    //     };
                    //     barSeries.push(barItemUse, barItemFree)
                    // }
                    // var useFreeOption = {
                    //     grid: {
                    //         left: '3%',
                    //         right: '4%',
                    //         bottom: '3%',
                    //         containLabel: true
                    //     },
                    //     xAxis: [
                    //         {
                    //             type: 'category',
                    //             data: ['实验组', '对照组']
                    //         }
                    //     ],
                    //     yAxis: [
                    //         {
                    //             type: 'value'
                    //         }
                    //     ],
                    //     series: barSeries,
                    // };
                    //
                    // function updateBar(which) {
                    //     url = '/utilfree/';
                    //     url += which;
                    //     $.ajax({
                    //         type: 'GET',
                    //         url: url,
                    //         dataType: 'json',
                    //         success: function (res) {
                    //             for (var i = 0; i < res.instances.length; i++) {
                    //                 var name = res.instances[i].name;
                    //                 var idStr = name.charAt(name.length - 1);
                    //                 var id = parseInt(idStr);
                    //                 var idUse = 2 * id;
                    //                 var idFree = 2 * id + 1;
                    //                 if (which === 'old') {
                    //                     barSeries[idUse].data[1] = res.instances[i].use;
                    //                     barSeries[idFree].data[1] = res.instances[i].free;
                    //                 } else if (which === 'fancy') {
                    //                     barSeries[idUse].data[0] = res.instances[i].use;
                    //                     barSeries[idFree].data[0] = res.instances[i].free;
                    //                 }
                    //             }
                    //         }
                    //     });
                    // }
                    //
                    // setInterval(function () {
                    //     updateBar('fancy');
                    //     updateBar('old');
                    //     useFreeChart.setOption(useFreeOption);
                    // }, 5000)

                    var label = {
                        show: true,
                        position: 'top',
                        formatter: '{a}',
                        color: '#000'
                    };

                    var useFreeOption = {
                        backgroundColor: '#fff',
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['TiKV Cluster', 'HDFS DataNode Cluster','']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'tikv-0-use',
                                type: 'bar',
                                barWidth: 25,
                                stack: 'tikv-0',
                                data: [5, 35, 0],
                                barGap: 1,
                            },
                            {
                                name: 'inst.1',
                                type: 'bar',
                                stack: 'tikv-0',
                                data: [15, 25, 0],
                                label: label,
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            },
                            {
                                name: 'tikv-1-use',
                                type: 'bar',
                                barWidth: 25,
                                stack: 'tikv-1',
                                data: [20, 10, 0]
                            },
                            {
                                name: 'inst.2',
                                type: 'bar',
                                barWidth: 25,
                                label: label,
                                stack: 'tikv-1',
                                data: [0, 50, 0],
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            },
                            {
                                name: 'tikv-2-use',
                                type: 'bar',
                                barWidth: 25,
                                stack: 'tikv-2',
                                data: [7, 37, 0]
                            },
                            {
                                name: 'inst.3',
                                type: 'bar',
                                barWidth: 25,
                                label: label,
                                stack: 'tikv-2',
                                data: [13, 23, 0],
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            },
                            {
                                name: 'tikv-3-use',
                                type: 'bar',
                                barWidth: 25,
                                stack: 'tikv-3',
                                data: [12, 60, 0]
                            },
                            {
                                name: 'inst.4',
                                type: 'bar',
                                barWidth: 25,
                                label: label,
                                stack: 'tikv-3',
                                data: [8, 0, 0],
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            }
                        ]
                    };
                    useFreeChart.setOption(useFreeOption);

                </script>
            </div>
        </div>
    </div>
</div>
</body>
</html>